<template>
    <div>
        <div id="pieChart" style="width: 100%; height: 350px;"></div>
    </div>
</template>
  
<script setup>
import * as echarts from 'echarts'
import { onMounted } from "vue";
import { ref } from "vue";
import { reqGetSubjectQuestion } from "@/api/mistake"

let data = ref([])
let subject = ref([])
let value = ref([])

// 初始化 options 对象
const options = ref({
    title: {
        text: '各学科错题数量的饼状图'
    },
    series: [] // series 初始为空数组
})

let radarChart = {}

// 初始化图表
const initChart = () => {
    radarChart = echarts.init(document.getElementById('pieChart'))
    radarChart.setOption(options.value) // 使用 options.value 来获取当前的 options 对象
}

// 组件挂载后的操作
onMounted(async () => {
    let result = await reqGetSubjectQuestion()
    if (result.code == 1) {
        data.value = result.data
        for (const subjectQuestion of data.value) {
            subject.value.push(subjectQuestion.subject)
            value.value.push(subjectQuestion.count)
        }
        console.log(subject.value);
        console.log(value.value);
        // 更新 options 对象中的 series 部分
        options.value.series = [{
            type: 'pie',
            data: data.value.map(item => ({ value: item.count, name: `${item.subject} (${item.count})` })),
            roseType: 'area'
        }]
    }
    initChart()
})
</script>


<style scoped></style>
